<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import sleepStatus from '@/components/sleepStatus.vue'
const isInBed = ref(0)
const heart = ref(0)
const breath = ref(0)
const deviceNum = ref('')
const dateFormat = ref('')
//用路由传参传递过来的都是字符串，数据类型改变了所以不能用全等去判断了
onLoad((option: any) => {
  isInBed.value = option.isInBed
  //console.log(typeof option.isInBed)
  heart.value = option.heart
  breath.value = option.breath
  deviceNum.value = option.deviceNum
  dateFormat.value = option.dateFormat
  console.log(option.dateFormat)
})

const routeTo = (url: string) => {
  console.log(url)
  uni.navigateTo({
    url: url,
  })
}
/* const routoWeek = () => {
  const weekres = await getWeekReportApi({
    date: deviceStore.devicedetail?.dateFormat as string,
    mtrlId: deviceStore.devicedetail?.deviceNum as string,
  })
  console.log(weekres)
  reportStore.setWeekReport(weekres.data)
  uni.navigateTo({
    url: `/pages/report/report-week`,
  })
} */
</script>

<template>
  <view class="index-detail">
    <sleepStatus :item="{ isInBed: isInBed, deviceNum: deviceNum, heart: heart, breath: breath }" />
    <uni-group>
      <view class="option" @click="routeTo(`/pages/calendar-choice/calendar-choice?deviceNum=${deviceNum}&type=daily`)">
        <view class="icon"> <img src="@/static/report.svg" alt="" /> </view> 日报
        <view class="right-arrow"> <img src="@/static/right-arrow.svg" alt="" /> </view>
      </view>
      <view
        class="option"
        @click="routeTo(`/pages/calendar-choice/calendar-choice?deviceNum=${deviceNum}&type=weekly`)"
      >
        <view class="icon"> <img src="@/static/report.svg" alt="" /> </view>周报
        <view class="right-arrow"> <img src="@/static/right-arrow.svg" alt="" /> </view>
      </view>
      <!-- <view class="option"
        ><view class="icon"> <img src="@/static/report.svg" alt="" /> </view> 月报
        <view class="right-arrow"> <img src="@/static/right-arrow.svg" alt="" /> </view>
      </view> -->
      <view class="option"
        ><view class="icon"><img src="@/static/set.svg" alt="" /></view>个人警报设置
        <view class="right-arrow"> <img src="@/static/right-arrow.svg" alt="" /> </view>
      </view>
      <view class="option"
        ><view class="icon"><img src="@/static/log.svg" alt="" /> </view>警报日志
        <view class="right-arrow"> <img src="@/static/right-arrow.svg" alt="" /> </view>
      </view>
      <view
        class="option"
        @click="routeTo(`/pages/equipment-detail/equipment-detail?deviceNum=${deviceNum}&name=${name}`)"
      >
        <view class="icon"><img src="@/static/user.svg" alt="" /> </view>使用者信息
        <view class="right-arrow"> <img src="@/static/right-arrow.svg" alt="" /> </view>
      </view>
    </uni-group>
  </view>
</template>

<style lang="scss">
.index-detail {
  .whole {
    //height: 288.462rpx;
    font-size: 34.615rpx;
    image {
      width: 38.462rpx;
      height: 38.462rpx;
      margin-right: 9.615rpx;
    }
    .offbed {
      background: linear-gradient(to right, #ffff, #d9e8bd);
    }
    .inbed {
      background: linear-gradient(to right, #ffff, #bbdaf1);
    }
    .address {
      width: 100%;
      height: 86.538rpx;
      display: flex;
      padding: 38.462rpx;
      .bed-number {
        width: 70%;
      }
      .data {
        width: 30%;
        .heart {
          height: 50%;
          display: flex;
          align-items: center;
        }
        .breathe {
          height: 50%;
          display: flex;
          align-items: center;
        }
      }
    }
    .statusInbed {
      width: 100%;
      height: 634.615rpx;
      background: url(@/static/sleep.png) no-repeat center center;
      background-size: contain;
      background-color: #5fa4df;
    }
    .statusOffbed {
      width: 100%;
      height: 634.615rpx;
      background: url(@/static/offbed.png) no-repeat center center;
      background-size: contain;
      background-color: #bad87e;
    }
  }
  .option {
    height: 67.308rpx;
    display: flex;
    align-items: center;
    .icon {
      height: 34.615rpx;
      width: 34.615rpx;
      margin-right: 19.231rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .right-arrow {
      margin-left: auto;
      image {
        width: 30.769rpx;
        height: 30.769rpx;
      }
    }
  }
}
</style>
